<template>
	<!-- 集团资金 -->
	<view>

		<!-- 顶部下拉 -->
		<view class="header">
			<u-dropdown menu-icon="arrow-down-fill" menu-icon-size="12" title-size="24" active-color="#3458A2"
				height="100" :border-bottom="true">
				<u-dropdown-item v-for="(c,i) in list" :key="i" :title="c.time" :options="c.options">
					<view class="slot-content" style="background-color: #FFFFFF;" v-if="i==0">
						
						<view class="arrow-down-fill-one">
							<view class="arrow-down-fill-one-top">
								<view>
									<view>
					
									</view>
									<view v-for="(c,i) in topList.nian" :key="i" v-if="c.fel==true">
										{{c.text}}
									</view>
									<view>
										<u-icon name="arrow-down" colo="#ccc"></u-icon>
									</view>
								</view>
								<view>
									<view>
									</view>
									<view v-for="(c,i) in topList.yue" :key="i" v-if="c.fel==true">
										{{c.text}}
									</view>
									<view>
										<u-icon name="arrow-down" colo="#ccc"></u-icon>
									</view>
								</view>
								<view>
									<view>
									</view>
									<view v-for="(c,i) in topList.ri" :key="i" v-if="c.fel==true">
										{{c.text}}
									</view>
									<view>
										<u-icon name="arrow-down" colo="#ccc"></u-icon>
									</view>
								</view>
							</view>
					
							<view class="arrow-down-fill-one-center">
								<view>
									<view v-for="(c,i) in topList.nian" :key="i" :class="{'class-BGC':c.fel}"
										@click="nianCLICK(i)">
										{{c.text}}
					
									</view>
								</view>
								<view>
									<view v-for="(c,i) in topList.yue" :key="i" :class="{'class-BGC':c.fel}"
										@click="yueCLICK(i)">
										{{c.text}}
					
									</view>
								</view>
								<view>
									<view v-for="(c,i) in topList.ri" :key="i" :class="{'class-BGC':c.fel}"
										@click="riCLICK(i)">
										{{c.text}}
					
									</view>
								</view>
					
					
					
							</view>
					
						</view>
					</view>
					<view class="slot-content" style="background-color: #FFFFFF;" v-if="i==5">
						<view class="arrow-down-fill-tow">
							<view>
								<view>
									<u-icon name="search" size="28"></u-icon>
								</view>
								<view>
									<input type="text" value="" v-model="input1" @input="input1s"/>
								</view>
							</view>
							<view>
								<view v-for="(c,ii) in getBankList" :key="ii" :class="c.fel==true?'bgcolor':''" @click="getBankLists(ii)">
									{{c.text}}
								</view>
							</view>
						</view>
					</view>
					
					<view class="slot-content" style="background-color: #FFFFFF;" v-if="i==4">
						<view class="arrow-down-fill-tow">
							<view>
								<view>
									<u-icon name="search" size="28"></u-icon>
								</view>
								<view>
									<input type="text" value="" v-model="input2"  @input="input2s"/>
								</view>
							</view>
							<view>
								<view v-for="(c,ii) in getAreaList" :key="ii" :class="c.fel==true?'bgcolor':''" @click="getAreaLists(ii)">
									{{c.text}}
								</view>
							</view>
						</view>
					</view>
					
				</u-dropdown-item>
			</u-dropdown>
		</view>
		<!-- 顶部下拉 -->

		<!-- 中部 -->
		<view class="center-list">
			<view>
				集团资金余额
			</view>
			<view>
				837亿元
			</view>
			<view>
				（Ⅰ类&Ⅱ类余额合计：568亿）
			</view>
		</view>
		<!-- 中部 -->

		<!-- echarts图表循环 -->

		<view class="footer-list">
			<view class="footer-list-s" v-for="(c,i) in keylist" :key="i" >
				<view class="footer-list-s-header" @click="jszjADD(i)">
					<view>
						<image src="../index/imgs/financing/zuo1.png" mode=""></image>
					</view>
					<view>
						{{c.title}}
					</view>
					<view>
						<image src="../index/imgs/financing/you1.png" mode=""></image>
					</view>
				</view>
				<view class="footer-list-s-center">
					<view :class="c.class">

						<qiun-data-charts :type="c.ss" :chartData="c.chartData" :errorShow="false" :echartsApp="true"
							:inScrollView="true" :disableScroll="true" background="none" :opts="c.list" />
						<!-- chartDatas -->
						<!-- listsd -->

					</view>
				</view>
			</view>
		</view>

		<!-- echarts图表循环 -->

		<view class="footer-footer">

			<view class="footer-footer-header">
				<view>明细表</view>
				<view>（单位：亿元）</view>
				<view>
					<i class="el-icon-crop"></i>
				</view>
			</view>

			<view class="footer-footer-header-bottom">

				<view>
					<view v-for="(c,i) in footerList" :key="i">
						{{c}}
					</view>
				</view>


				<view>
					<view v-for="(c,i) in footerListd" :key="i" @click="optionList(i)">
						<view>
							{{c.dq}}
						</view>
						<view>
							<u-icon name="arrow-down-fill" color="#ccc" size="5"></u-icon>
						</view>

					</view>
				</view>

			</view>

		</view>


		<view class="footeraaaaaaaaaaa">
			<el-table :data="tableData" :cell-style="cellStyle" :header-cell-style="tableHeaderColor">
				<el-table-column prop="AREA_ORG_NAME" label="地区" width="50">
				</el-table-column>
				<el-table-column prop="BANK" label="-" width="60">
				</el-table-column>
				<el-table-column prop="BANK" label="-" width="60">
				</el-table-column>
				<el-table-column prop="BANK" label="-" width="60">
				</el-table-column>
				<el-table-column prop="BANK" label="-" width="60">
				</el-table-column>
				<el-table-column prop="BANK" label="-" width="60">
				</el-table-column>
				<el-table-column width="120" prop="TOTAL_VALUE" label="金额">
				</el-table-column>
			</el-table>

		</view>






	</view>
</template>

<script>
	import echarts from './uechartsList/list.js'
		import { getBank,getArea} from '../../network/page/home.js'
	export default {
		data() {
			return {
				getBankList:[],
				getAreaList:[],
				input2:'',
				input1:'',
				topList: {
					nian: [{
							text: '2017年',
							fel: false
						},
						{
							text: '2018年',
							fel: false
						},
						{
							text: '2019年',
							fel: false
						},
						{
							text: '2020年',
							fel: false
						},
						{
							text: '2021年',
							fel: true
						}
					],
					yue: [{
							text: '1月',
							fel: false
						},
						{
							text: '2月',
							fel: false
						},
						{
							text: '3月',
							fel: false
						},
						{
							text: '4月',
							fel: false
						},
						{
							text: '5月',
							fel: false
						},
						{
							text: '6月',
							fel: true
						},
						{
							text: '7月',
							fel: false
						},
						{
							text: '8月',
							fel: false
						},
						{
							text: '9月',
							fel: false
						},
						{
							text: '10月',
							fel: false
						},
						{
							text: '11月',
							fel: false
						},
						{
							text: '12月',
							fel: false
						}
				
					],
					ri: []
				},
				list: [{
						time: "时间",
						fel: false,
						options: []
					},
					{
						time: "口径",
						fel: false,
						options: []
					},
					{
						time: "类别",
						fel: false,
						options: []
					},
					{
						time: "币种",
						fel: false,
						options: []
					},
					{
						time: "地区",
						fel: false,
						options: []
					},
					{
						time: "银行",
						fel: false,
						options: []
					}

				],
				keylist: [{
						title: '集团资金总览表',
						list: echarts.OTecharts,
						chartData: echarts.OTchartData,
						ss: 'ring',
						class: 'charts-box'
					},
					{
						title: '集团资金地区分布',
						list: echarts.OTecharts,
						chartData: echarts.OTchartData,
						ss: 'ring',
						class: 'charts-box'
					},
					{
						title: '集团资金银行分布',
						list: echarts.OTecharts,
						chartData: echarts.OTchartData,
						ss: 'ring',
						class: 'charts-box'
					},
					{
						title: '集团资金趋势分布',
						list: echarts.Fecharts,
						chartData: echarts.FchartData,
						ss: 'line',
						class: 'charts-boxs'
					}

				],
				echarts: echarts,
				footerList: [],
				tableData: [{
						AREA_ORG_NAME: '合计',
						TOTAL_VALUE: '100'

					},
					{
						AREA_ORG_NAME: '重庆',
						TOTAL_VALUE: '20'

					}
				],
				footerListd: [{
						dq: '地区',
						optionListsd1: [{
								text: '显示',
								fel: false
							},
							{
								text: '不显示',
								fel: false
							},
						],
						fel: false
					},
					{
						dq: '-',
						optionListsd1: [{
								text: '显示',
								fel: false
							},
							{
								text: '不显示',
								fel: false
							},
						],
						fel: false
					},
					{
						dq: '-',
						optionListsd1: [{
								text: '显示',
								fel: false
							},
							{
								text: '不显示',
								fel: false
							},
						],
						fel: false
					},
					{
						dq: '-',
						optionListsd1: [{
								text: '显示',
								fel: false
							},
							{
								text: '不显示',
								fel: false
							},
						],
						fel: false
					},
					{
						dq: '不显示',
						optionListsd1: [{
								text: '显示',
								fel: false
							},
							{
								text: '不显示',
								fel: false
							},
						],
						fel: false
					},
					{
						dq: '不显示',
						optionListsd1: [{
								text: '显示',
								fel: false
							},
							{
								text: '不显示',
								fel: false
							},
						],
						fel: false
					}
				],


			}
		},
		methods: {
			input1s(){
				console.log(this.input1)
				this.getBankList.forEach(res=>{
					if(this.input1.include(res.text)){
						console.log(res.text)
					}
				})
				
			},
			input2s(){
				console.log(this.input2)
			},
			getBankLists(c){
				
				this.getBankList.forEach(res=>{
					res.fel=false
				})
				this.getBankList[c].fel=!this.getBankList[c].fel
			},
			getAreaLists(c){
				this.getAreaList.forEach(res=>{
					res.fel=false
				})
				this.getAreaList[c].fel=!this.getAreaList[c].fel
			},
			cellStyle(row, column, rowIndex, columnIndex) {
				return 'background:#F7F7F7'
			},
			tableHeaderColor(row) {
				return 'background:#F7F7F7'
			},
			jszjADD(i){
				if(i==0){
					uni.navigateTo({
						url:'./financeS1/financeS1'
					})
				}
				if(i==1){
					uni.navigateTo({
						url:'./financeS2/financeS2'
					})
				}
				if(i==2){
					uni.navigateTo({
						url:'./financeS3/financeS3'
					})
				}
				if(i==3){
					uni.navigateTo({
						url:'./financeS4/financeS4'
					})
				}
			}
		},
		mounted() {
			// 银行获取
			getBank().then(res=>{
				res.data.data.forEach(res=>{
					let getBANCK={
						text:res,
						fel:false,
					}
					this.getBankList.push(getBANCK)
				})
				
				
			})
			// 地区获取
			getArea().then(res=>{
				
				res.data.data.forEach(res=>{
					let getAREA={
						text:res,
						fel:false,
					}
				this.getAreaList.push(getAREA)
				})
				
				
				
				
				
				
				
			})
		}
	}
</script>

<style scoped src="../css/css1-10/sanAllcss/sanAllcss.min.css">

</style>
<style scoped src="./uechartsList/css/li.min.css"> </style>
<style scoped src="../css/css1-10/endTime/endTime.min.css"></style>
<style lang="scss" scoped>
	.class-BGC {
		background-color: #06AFB2;
		color: #fff;
	}
	
	
	.bgcolor{
		background-color: #06AFB2;
	}
	.arrow-down-fill-tow {
	    width: 100vw;
	    overflow: hidden;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	
	    >view:nth-child(1) {
	        margin-top: 79upx;
	        width: 202upx;
	        height: 53upx;
	        border: 2upx solid #06AFB2;
	        border-radius: 5upx;
	        margin-bottom: 35upx;
	        display: flex;
	        align-items: center;
	
	        >view:nth-child(1) {
	            margin-left: 10upx;
	        }
	    }
	
	    >view:nth-child(2) {
	        width: 202upx;
	        height: 340upx;
	        border: 2upx solid #06AFB2;
	        border-radius: 5upx;
	        margin-bottom: 41upx;
			
	        overflow: hidden auto;
	        display: flex;
	        flex-direction: column;
	        align-items: center;
			>view{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 10upx 0;
			}
	    }
	
	}
</style>
